<template>
  <el-container class="work-warp">
    <div class="top">
      <FormPanel ref="formPanel" :list="orderList" :cols="3" :labelWidth="110" formType="add" :isSubmitBtn="false" @formChange="getGdssList" />
      <el-row>
        <el-button type="primary" :loading="addBtnState" @click="query">查 询</el-button>
        <el-button type="primary" :loading="addBtnState" @click="reset">重 置</el-button>
      </el-row>
    </div>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      selectionType="single"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="arr => (this.onChangeColumn = arr)"
    >
    </FilterTable>
    <div class="footer">
      <el-button type="primary" :loading="addBtnState" @click="saveDialog">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </el-container>
</template>
<script>
import { getFwgcsSelect, getGdssList } from '@/api/repair/business/customer';
import { dictionary } from '@/utils/dictMixin';
import { isFormEmpty } from '@/utils/index';
import moment from 'moment';

export default {
  name: 'workSearch',
  mixins: [dictionary],
  props: ['workNo'],

  data() {
    return {
      orderList: this.createFormList(),
      addBtnState: null,
      fetchApi: getGdssList,
      fetchParams: { xhrAbort: true },
      columns: this.createTableColumns(),
      onChangeColumn: []
    };
  },
  watch: {
    workNo: {
      handler(str) {
        this.orderList.some(item => {
          if (item.fieldName === 'roNo') {
            item.initialValue = str;
            return true;
          }
        });
      },
      immediate: true
    }
  },

  mounted() {
    this.getFwgcsSelect();
    this.query();
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '工单号',
          fieldName: 'roNo',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          placeholder: ''
        },
        {
          type: 'SELECT',
          label: '服务工程师',
          fieldName: 'serviceAdvisor',
          placeholder: '请选择',
          itemList: []
        },
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'ownerName',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: ''
        }
      ];
    },

    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '工单号',
          dataIndex: 'RO_NO',
          sorter: true
        },
        {
          title: '工单类型',
          dataIndex: 'RO_TYPE',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.RO_TYPE, '1253')}</span>;
          }
        },
        {
          title: '维修类型',
          dataIndex: 'REPAIR_TYPE_NAME',
          sorter: true
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          sorter: true
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          sorter: true
        },
        {
          title: '车主',
          dataIndex: 'OWNER_NAME',
          sorter: true
        },
        {
          title: '服务工程师',
          dataIndex: 'EMPLOYEE_NAME',
          sorter: true
        },
        {
          title: '开单日期',
          dataIndex: 'RO_CREATE_DATE',
          sorter: true,
          render: props => {
            return <span>{moment(props.row.RO_CREATE_DATE).format('YYYY-MM-DD hh:mm:ss')}</span>;
          }
        },
        {
          title: '工单状态',
          dataIndex: 'RO_STATUS',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.RO_STATUS, '1255')}</span>;
          }
        },
        {
          title: '锁定人',
          dataIndex: 'LOCK_USERS',
          sorter: true
        },
        {
          title: '竣工标识',
          dataIndex: 'COMPLETE_TAG',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.COMPLETE_TAG, '1278')}</span>;
          }
        },
        {
          title: '预交车时间',
          dataIndex: 'END_TIME_SUPPOSED',
          sorter: true,
          render: props => {
            return <span>{moment(props.row.END_TIME_SUPPOSED).format('YYYY-MM-DD hh:mm:ss')}</span>;
          }
        },
        {
          title: '备件销售单号',
          dataIndex: 'SALES_PART_NO',
          sorter: true
        }
      ];
    },

    formChangeHandle() {},

    query() {
      this.$refs.formPanel.SUBMIT_FORM();
    },

    closeDialog() {
      this.$emit('closeDialog', false);
    },

    saveDialog() {
      if (this.onChangeColumn.length) {
        let obj = this.onChangeColumn[0];

        if (!isFormEmpty(obj.LOCK_USER)) {
          this.$notify({
            title: '提示消息',
            message: `此单号${obj.RO_NO}已被用户${obj.LOCK_USERS}锁定!`,
            type: 'warning'
          });

          return;
        }
      }

      this.$emit('saveDialog', this.onChangeColumn);
    },

    getGdssList(val) {
      this.fetchParams = Object.assign({}, val, { offset: 0, xhrAbort: false });
    },

    reset() {
      this.$refs.formPanel.RESET_FORM();
    },

    async getFwgcsSelect() {
      const res = await getFwgcsSelect();
      this.orderList[2].itemList = res.map(x => ({ value: x.EMPLOYEE_NO, text: x.EMPLOYEE_NAME }));
    }
  }
};
</script>
<style lang="less" scoped>
.work-warp {
  flex-direction: column;

  .top {
    width: 100%;
    display: flex;
    flex-direction: column;

    .el-row {
      text-align: center;
    }
  }

  .footer {
    text-align: center;
  }
}
</style>
